{include file="common/header"}
<link rel="stylesheet" type="text/css" href="/themes/template/static/css/element.min.css">
<script type="text/javascript" src="/themes/template/static/js/vue.min.js"></script>
<script type="text/javascript" src="/themes/template/static/js/element.min.js"></script>
<style type="text/css">
.list{font-size:0}
.bi{display: inline-block;margin:10px;padding:10px;border:1px solid transparent;border-radius:10px;cursor: pointer;}
.bi img{width:100px}
.bi div{margin-top:5px;font-size: 16px;font-weight: 600;text-align: center;color:#666}
.bi:hover,.bi.active{border:1px solid #E6A23C;}
.bi:hover div,.bi.active div{color:#E6A23C}
.create-order{width:100%;}
</style>
<div id="app" v-cloak>
    <div class="el-warp">
        <div class="el-user">
            {include file="user/site"}
            <el-card class="box-card content">
                <div slot="header" class="clearfix">
                    <el-button @click="dialog = true" size="small" type="primary">查询充值记录</el-button>
                </div>
                <div class="list">
                    <div v-for="(item, index) in priceList" class="bi" :class="{active: price == item}" @click="price = item">
                        <img src="/plugins/userrecharge/static/index/images/bi.png">
                        <div>￥{{item}}</div>
                    </div>
                    <el-button
                        class="create-order"
                        type="warning" 
                        v-loading="createLoading"
                        :disabled="price == ''" 
                        @click="createOrder()">
                        确定购买
                    </el-button>
                </div>
                <el-dialog
                    title="充值记录"
                    :visible.sync="dialog"
                    width="70%">
                    <el-date-picker
                        size="small"
                        v-model="search.date"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="截止日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                    <div class="list" style="height: 59vh" v-infinite-scroll="list" :infinite-scroll-disabled="disabled">
                        <div class="item" v-for="(item, index) in data">
                            <span>{{item.method}}充值</span>
                            <span style="color:#E6A23C">+{{item.pay_rmb}}</span>
                            <span class="time">{{item.create_time}}</span>
                        </div>
                        <div v-if="loading" class="el-loader">加载中...</div>
                        <div v-if="noMore && loading === false" class="el-nomore">没有更多啦</div>
                    </div>
                </el-dialog>
            </el-card>
        </div>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                priceList: [0.01,6,38,58,118,168,368,688,1288],
                dialog: false,
                data: [],
                search:{
                    page: 1,
                    date: [],
                },
                price: 0.01,
                loading: false,
                createLoading: false,
                pickerOptions: {
                    shortcuts: [{
                        text: '一周内',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '一个月内',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '三个月内',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            }
        },
        computed: {
            noMore() {
                return this.count <= this.data.length;
            },
            disabled() {
                return this.loading || this.noMore;
            }
        },
        methods: {
            /**
             * 加载列表
             */
            list() {
                let self = this;
                self.loading = true;
                post('api/userrecharge/user/index', self.search, function (res) {
                    if (res.status === 'success') {
                        self.search.page++;
                        self.data  = self.data.concat(res.data);
                        self.count = res.count;
                    }
                    self.loading = false;
                })
            },
            /**
             * 搜索
             */
            searchList() {
                this.search.page = 1;
                this.data = [];
                this.list();
            },
            /**
             * 创建订单
             */
            createOrder() {
                let self = this;
                self.createLoading = true;
                post('api/userrecharge/user/create', {price: self.price}, function (res) {
                    if (res.status === 'success') {
                        location.href = index_url('userrecharge/user/details', {id: res.data.id});
                    }
                    self.createLoading = false;
                })
            }
        },
    });
</script>
</body>
</html>